<template>
  <figure
    class="snowflake"
    :style="{
      fontSize: props.fontSize,
      color: props.color
    }"
  >
    <div v-for="i in 6" :key="i" class="flake" :style="`--n:${i}`">
      <span v-for="j in 5" :key="j"></span>
    </div>
    <!-- <div class="center"></div> -->
  </figure>
</template>

<script setup lang="ts">
// 模块引入
//import { ref } from 'vue'
defineOptions({
  // 组件名称
  name: 'SnowflakeComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
interface IProps {
  fontSize?: string
  color?: string
  isrun?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  fontSize: '100px',
  color: 'red',
  isrun: true
})
</script>

<style scoped lang="scss">
.snowflake {
  width: 4em;
  height: 4em;
  display: flex;
  justify-content: center;
  transform-origin: center;
  //   animation: rotate 10s linear infinite;
  .flake {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 0.1em;
    height: 2em;
    background: currentColor;
    border-radius: 0.05em;
    position: absolute;
    transform-origin: bottom;
    transform: rotate(calc((var(--n) - 1) * 60deg));
    // @for $i from 1 through 6 {
    //   &:nth-child(#{$i}) {
    //     --n: #{$i};
    //   }
    // }
    gap: 0.049em;
    span {
      &:nth-child(1) {
        width: 0.2em;
        height: 0.2em;
        background: currentColor;
        border-radius: 50%;
      }
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5) {
        width: var(--side-length);
        height: var(--side-length);
        border: 0.1em solid;
        border-width: 0.1em;
        border-style: none solid solid none;
        border-radius: 0.05em;
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        --side-length: 0.5em;
      }
      &:nth-child(3) {
        --side-length: 0.4em;
      }
      &:nth-child(4) {
        --side-length: 0.3em;
      }
      &:nth-child(5) {
        --side-length: 0.3em;
      }
      //   &:nth-child(2) {
      //     margin-top: -0.2em;
      //   }
    }
  }
  .center {
    background: currentColor;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}
</style>
